<template>
    <div>
        <TopNav :title="((route.meta.title) as string)" />
        <div class="main">
            <section class="goods_img">
                <img class="img" :width="imgH" :src="goods[0].goodsCoverImg" alt="" />
            </section>
            <section class="goods_desc">
                <p class="title">{{ goods[0].goodsName }}</p>
                <div class="yf">免运费</div>
                <p class="price">￥{{ goods[0].sellingPrice }}</p>
            </section>
            <section class="goods-intro">
                <ul>
                    <li>概述</li>
                    <li>参数</li>
                    <li>安装服务</li>
                    <li>常见问题</li>
                </ul>
                <div class="img_desc" v-html="goods[0].goodsDetailContent"></div>
            </section>
        </div>
        <ActionBar height=" 1.33333rem;">
            <ActionBarIcon icon="chat-o" text="客服" />
            <ActionBarIcon icon="cart-o" text="购物车" @click="toCart" />
            <ActionBarButton type="warning" text="加入购物车" color="linear-gradient(90deg,#0dc3c3,#098888)"
                @click="addCart" />
            <ActionBarButton color="linear-gradient(90deg,#0dc3c3,#098888)" type="danger" text="立即购买" @click="buy" />
        </ActionBar>
    </div>
</template>
  
<script setup lang="ts">
import { ActionBar, ActionBarIcon, ActionBarButton, } from 'vant'
import { useRoute, useRouter } from "vue-router";
import { http } from "../../apis/user";
import TopNav from "../../components/topNav.vue";
const route = useRoute()
const router = useRouter()
interface goodsType {
    goodsCarouselList: Array<string>,
    goodsCoverImg: string,
    goodsDetailContent: string,
    goodsId: number
    goodsIntro: string
    goodsName: string
    originalPrice: number
    sellingPrice: number
    tag: string
}
const proxy=getCurrentInstance()
let imgH = ref(window.innerHeight)
const goodsId = Number(route?.params?.productID)
let goodsCount = ref(1)
let goods: goodsType[] = reactive([])//范显示约束
function getData() {
    const id = Number(route.params.productID)
    http.getInfoData(id).then((data: any) => {
        goods.push(data.data)
    });
}
function toCart() {
    router.push("/Cart");
}
function addCart() {
    http.addCarts(
        goodsId,
        goodsCount.value
    ).then((data: any) => {
        if (data.resultCode === 200) {
            localStorage.setItem("productID", (route.params.productID) as string)
            // $store.dispatch("changeCartListAsync");
        }
        if (data.resultCode === 500) {
            // $toast.fail(data.message);
        }
    });
}
function buy() {
  const productID = route.params.productID;
  // 获取已经存储的商品 ID
  const storedProductID = localStorage.getItem("productID");
  // 如果已经存储了商品 ID 并且和当前购买的商品 ID 相同，则不执行任何操作
  if (storedProductID && storedProductID === productID) {
    return;
  }
  // 否则添加商品到购物车
  toCart();
}
computed: {
    // num() {
    //     return $store.state.cartList.length;
    // },
}
getData();
</script>
<style scoped lang="less">
.main {
    margin-top: 1.22667rem;

    .good_img {
        height: 5rem;
    }

    .goods_desc {
        padding: 0 0.26667rem;

        .title {
            font-size: 0.48rem;
            text-align: left;
            color: #333;
        }

        .yf {
            font-size: 0.37333rem;
            text-align: left;
            color: #999;
            padding: 0.13333rem 0;
        }

        .price {
            color: #f63515;
            font-size: 0.58667rem;
        }
    }

    .goods-intro {
        ul {
            display: flex;
            justify-content: space-around;
            margin: 0.26667rem 0;

            li {
                flex: 1;
                padding: 0.13333rem 0;
                text-align: center;
                font-size: 0.4rem;
                border-right: 0.02667rem solid #999;
                box-sizing: border-box;
            }

            :last-child {
                border-right: none;
            }
        }

        .img_desc {
            img {
                width: 100%;
            }
        }
    }
}

.img_desc /deep/img {
    width: 100%;
}
</style>